
export default {
    data: {
        title: 'World'
    },
    setTransform(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
        path.setTransform(0.8, 0, 0, 0.4, 0, 0);
        ctx.stroke(path);
    },
    closePath(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.moveTo(200, 100);
        path.lineTo(300, 100);
        path.lineTo(200, 200);
        path.closePath();
        ctx.stroke(path);
    },
    moveTo(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.moveTo(50, 100);
        path.lineTo(250, 100);
        path.lineTo(150, 200);
        path.closePath();
        ctx.stroke(path);
    },
    lineTo(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.moveTo(100, 100);
        path.lineTo(100, 200);
        path.lineTo(200, 200);
        path.lineTo(200, 100);
        path.closePath();
        ctx.stroke(path);
    },
    bezierCurveTo(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.moveTo(10, 10);
        path.bezierCurveTo(20, 100, 200, 100, 200, 20);
        ctx.stroke(path);
    },
    quadraticCurveTo(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.moveTo(10, 10);
        path.quadraticCurveTo(100, 100, 200, 20);
        ctx.stroke(path);
    },
    arc(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.arc(100, 75, 50, 0, 6.28);
        ctx.stroke(path);
    },
    arcTo(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.arc(100, 75, 50, 0, 6.28);
        ctx.stroke(path);
    },
    ellipse(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
        ctx.stroke(path);
    },
    rect(){
        const el = this.$refs.path;
        var ctx = el.getContext('2d');
        ctx.clearRect(0,0,500,200);
        var path = ctx.createPath2D();
        path.rect(20, 20, 100, 100);
        ctx.stroke(path);
    },
    clearCanvas(ctx){

//        var w = ctx.width;
//        var h = ctx.height;
//        ctx.clearRect(0, 0, w, h);
    }

}
